<template>
  <div id="mars2dContainer" style="width: 100%; height: 100vh;"></div>
</template>

<script>
import "leaflet/dist/leaflet.css";
import "leaflet";
import "mars2d/dist/mars2d.css";
import * as mars2d from "mars2d"; // Ensure that Mars2D is correctly installed and imported
// Import Mars2D plugins if needed
import "mars2d-esri"; // Only if necessary
import cd from "./cd.json"; // Ensure this file is correctly referenced

export default {
  name: "MarsMap",
  data() {
    return {
      map: null, // Map object
      tileLayer: null, // Base map layer
      customColor: "#180D6A", // Custom color
    };
  },
  mounted() {
    // Initialize the map when the component is mounted
    this.initMap();
  },
  methods: {
    // Initialize the map
    initMap() {
      // Set map options
      const mapOptions = {
        zoom: 12,
        center: { lng: 121.399956, lat: 28.408388 },
        basemaps: [],
        renderer: mars2d.L.svg(),
      };

      // Create the map
      this.map = new mars2d.Map("mars2dContainer", mapOptions);

      // Add base map layer
      this.tileLayer = new mars2d.layer.TileLayer({
        type: "tile",
        url: "https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
        customColor: this.customColor,
      });
      this.map.addLayer(this.tileLayer);

      // Add layer control if available
      if (this.map.controls && this.map.controls.layers) {
        this.map.controls.layers.addOverlay(this.tileLayer, "Custom Color Layer");
      }

      // Load local GeoJSON layer to show boundaries
      this.loadGeoJsonLayer();

      // Add center marker
      this.addCenterMarker();
    },

    // Add center marker
    addCenterMarker() {
      // Create a marker graphic
      const marker = new mars2d.graphic.Marker({
        latlng: { lng: 121.399956, lat: 28.408388 }, // Center point coordinates
        style: {
          pixelSize: 10, // Marker size
          color: "#FF0000", // Marker color
          outline: true,
          outlineColor: "#FFFFFF", // Marker outline color
          outlineWidth: 2, // Marker outline width
        },
        popup: "Center Point", // Popup text for the marker
      });

      // Add the marker directly to the map instead of using a separate layer
      this.map.addGraphic(marker);
    },

    // Load GeoJSON layer to display area boundaries
    async loadGeoJsonLayer() {
      try {
        // Load GeoJSON data directly
        const geoJsonData = cd;

        // Create a GeoJSON layer to display boundaries
        const geoJsonLayer = new mars2d.layer.GeoJsonLayer({
          data: geoJsonData,
          symbol: {
            styleOptions: {
              fill: false, // No fill, show only boundaries
              outline: true,
              outlineColor: "#1E90FF", // Boundary color
              outlineWidth: 3, // Boundary line width
              outlineOpacity: 0.8, // Boundary opacity
            },
          },
        });

        // Add the layer to the map
        this.map.addLayer(geoJsonLayer);

        console.log("GeoJSON layer loaded successfully", geoJsonLayer);
      } catch (error) {
        console.error("Failed to load GeoJSON data:", error);
      }
    },

    // Change the base map color
    onChangeColor(color) {
      this.tileLayer.customColor = color;
      this.map.container.style.background = color; // Change the map container background color
    },
  },
  beforeDestroy() {
    // Release map resources
    if (this.map) {
      this.map.destroy();
      this.map = null;
    }
  },
};
</script>

<style scoped>
#mars2dContainer {
  width: 100%;
  height: 100vh;
}
</style>
